<template>
    <ul>
        <li>
            <router-link to="/home">
                <i class="iconfont">&#xe629;</i>
                首页
            </router-link>
        </li>
        <li>
            <router-link to="/bodybuild">
                <i class="iconfont">&#xe883;</i>
                健身
            </router-link>
        </li>
        <li>
            <router-link to="/find">
                <i class="iconfont">&#xe609;</i>
                发现
            </router-link>
        </li>
        <li>
            <router-link to="/mine">
                <i class="iconfont">&#xe658;</i>
                我的
            </router-link>
        </li>
    </ul>
</template>
<script>
export default {
    name:'TopNav',
    data(){
        return{

        }
    }
}
</script>
<style scoped  lang="less">
a{
    text-decoration: none;
    font-size: 15px;
    color: #8b8b8b;
    z-index: 999;
}
ul{
    display: flex;
    height: 60px;
    position: fixed;
    z-index: 999;
    bottom: 0;
    left: 0;
    right: 0;
    background: #181818; 

    li{
        list-style: none;
        flex: 1;
        float: left;
        text-align: center;
        i{
            display: block;
            font-size: 25px;
            margin-top: 5px;
        }
    }
}
.active{
    color: #Fddf05;
}
</style>